<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
			<swiper-item>
				<view class="swiper-item"><image src="../../static/lbt2.png" mode="widthFix"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="../../static/lbt3.png" mode="widthFix"></image></view>
			</swiper-item>
		</swiper>
		<view :class="classSearch">
			<my-search @click="gotoSearch"></my-search>
		</view>
		<view class="search-condition" v-if="hospInfo.name">
			<view @click="showAll">展示全部</view>
		</view>
		<!-- <view class="condition"></view> -->
		<scroll-view scroll-y="true" :style="{height: wh + 'px'}" @scrolltolower="scrollLower">
			<view  v-for="(item,index) in hospInfoList" :key="index">
				<navigator class="hosp-list" :url="'/subpkg/hosp_detail/hosp_detail?id='+item.id">
					<!-- 左边logo -->
					<view>
						<image :src="item.logo" class="logo" mode="widthFix"></image>
					</view>
					<!-- 右边信息 -->
					<view class="hosp-list-right">
						<view><uni-icons type="info"></uni-icons>&nbsp;&nbsp;&nbsp;{{item.name}}</view>
						<view style="display: flex; justify-content: space-between">
							<view><uni-icons type="location"></uni-icons>区域:{{item.district < 20?districts[item.district]:'郑东新区'}}</view>
							<view>距离:{{distances[index]}}</view>
						</view>
						<view><uni-icons customPrefix="order" type="icon-hsjcyingyeshijian"></uni-icons>工作时间:{{item.amTime}} {{item.pmTime}}</view>
					</view>
				</navigator>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				//当前设备可用高度
				wh:0,
				hospInfoList:[],
				districts:[
					'','',
					'中原区','二七区','管城区','金水区','上街区','惠济区',
					'中牟县','经开区','高新区','航空港区','巩义市','荥阳市',
					'新密市','新郑市','登封市'
				],
				page:1,
				limit:5,
				totalPage:0,
				status:"more",
				longitude:null,
				latitude:null,
				distances:[],
				hospInfo:{name:'',status:1}
			};
		},
		//加载页面时
		onLoad(options) {
			if(options.name){
				this.hospInfo.name = options.name
				console.log('加载查询条件：'+this.hospInfo.name)
			}
			this.getLocation()
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 170 - 15
		},
		mounted() {
			this.getHospInfoList()
		},
		methods:{
			
			 scrollLower() {
			      if (this.page >= this.totalPage) {
			        this.status = "noMore"
			        return
			      } else {
			        this.status = "loading"
			      }
			      this.page++
			      this.timer = setTimeout(() => {
			        this.getHospInfoList()
			      }, 200)
			      console.log('我滚动到底部了')
			    },
			
			//获取检测点信息
			getHospInfoList(page=1,limit){
				uni.request({
					url:'http://192.168.43.224:9001/admin/hospinfo/getHospInfoList/'+ this.page + '/' + this.limit,
					data:this.hospInfo,
					method:'GET',
					success: (res) => {
						console.log(res)
						this.totalPage = res.data.data.pages
						for(var i = 0; i < res.data.data.records.length; i++){
							this.hospInfoList.push(res.data.data.records[i])
							this.getDistance(res.data.data.records[i].longitude,res.data.data.records[i].latitude)
						}

					},
					fail: (res) => {
						uni.showToast({
							title:'数据请求失败',
							duration:1500,
							icon:'none'
						})
					},
					complete() {
						wx.hideLoading()
						wx.stopPullDownRefresh()
					}
				})
				
			},
			
			//点击搜索触发事件
			gotoSearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			},
			
			//获取当前位置
			getLocation(){
				uni.getLocation({
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
						console.log(this.longitude)
						console.log(this.latitude)
					},
					fail: (res) => {
						console.log('f:'+res)
					}
				})
			},
			
			//计算距离
			getDistance(longitude,latitude){
				uni.request({
					url:'https://apis.map.qq.com/ws/distance/v1/?' + 
					'&from='+this.latitude+','+this.longitude+
					'&to='+latitude+','+longitude+
					'&key=7Z6BZ-XVQWW-VCURA-RZCPH-YP3X7-2QFFJ',
					method:'GET',
					success: (res) => {
						// let jvli = res.data.result.row
						console.log(res.data.result.elements[0].distance)
						let temp = res.data.result.elements[0].distance
						if(temp && temp !== -1){
							if(temp < 1000){
								temp = temp +'m'
							}else{
								temp = (temp/2/500).toFixed(2)+'km'
							}
						}
						this.distances.push(temp)
					}
				})
			},
			
			//距离优先
			distanceSort(){
				console.log("排序")
				for(var i = 0; i < this.hospInfoList.length-1; i++){
					for(var j = i+1; j < this.hospInfoList.length; j++){
						if(this.distances[i] > this.distances[j]){
							var temp1 = this.hospInfoList[i]
							this.hospInfoList[i] = this.hospInfoList[j]
							this.hospInfoList[j] = temp1
							
							var temp2 = this.distances[i]
							this.distances[i] = this.distances[j]
							this.distances[j] = temp2
						}
					}
				}
				for(var i = 0 ; i < this.hospInfoList.length; i++){
					console.log(this.hospInfoList[i].name+"-->"+i)
				}
				console.log('排序后：'+this.distances)
			},
			
			showAll(){
				this.hospInfo = {}
				this.hospInfoList = []
				this.page = 1
				this.getHospInfoList()
			}
			
			
				
		},
		//上拉触底
		// onReachBottom() {
		// 	console.log("上拉触底")
		// 	this.page = this.page+1
		// 	this.getHospInfoList(this.page,this.limit)
		// },
		//下拉刷新
			onPullDownRefresh() {
				this.getHospInfoList()
			},
			onPullDownRefresh: function () {
				wx.stopPullDownRefresh()
			}
			
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	display: flex;
	flex-direction: column;
}
swiper{
	height: 120px;
}
swiper-item image{
	width: 100%;
}
.hosp-list{
	margin-top: 10px;
	// border: 1rpx solid #000000;
	width: 100%;
	height: 80px;
	display: flex;
	background-color: #EBEEF5;
	box-shadow: 5rpx #C0C4CC;
}
.logo{
	margin-top: 10px;
	margin-bottom: 10rpx;
	height: 80px;
	width: 120rpx;	
	margin-left: 20rpx;
}
.hosp-list-right{
	margin-top: 10px;
	margin-left: 20px;
	line-height: 25px;
	flex-wrap: wrap;
	justify-content: space-around;
	font-size: 15px;
}
.hosp-list-time{
	display: flex;
}
.condition{
	width: 100%;
	height: 130px;
	background-color: #666666;
}
.search-condition{
	height: 15px;
	display: flex;
	justify-content: space-around;
	padding: 5px;
	margin-bottom: 5px;
}
</style>
